<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" href="${webcontext}/res/style/S.css" />
	<style type="text/css">
		.testcases{list-style: none;border: solid 1px #EDEDED;border-bottom: none;}
		
		.tcase {height:40px;border-left:solid 10px #8397FC;line-height: 40px;padding-left:10px;font-size: 13px;font-family: 宋体,arial;}
		.testcases li{border-bottom:solid 1px  #EDEDED; border-collapse: collapse;}
		.testcases li.current{background-color: #ffc;}
		.testcases li:hover:not(.current){background-color: #fcfcfc;}
		.fail{border-left: solid 10px #ff9d00 ;}
		.ok{border-left: solid 10px #00a96d  ;}
		
		.ctrls{float:right;margin-right:10px;}
		
		.switcher{ background: #FAFAFA;border: solid 1px #AEAEAE;display: inline-block;vertical-align: middle; width: 60px;height: 25px; cursor: pointer;}
		.switcher  .handler{background-color: #fff;display: block; width: 50%; height: 100%;}
		.switcher  .handler.yes{float:left;border-right:solid 1px #AEAEAE;border-left:none;background-color: #00a96d;}
		.switcher  .handler.no{float:right;border-left:solid 1px #AEAEAE;border-right:none;background-color: #ff9d00;}
	</style>
	<script type="text/javascript" src="${webcontext }/res/js/jquery.min.js"></script>
	<script type="text/javascript" src="${webcontext }/res/js/S.js"></script>
	<script type="text/javascript">
		$(function(){
			
			var tbl = new S.Table({
				el:'#tbl_001',
				pager:true,
				pageSize:30,
				scroll:true,
				multiselect:false,
				click:function(){
					loadCases();
				},
				renders:{
					stat:function(v,o){
						return  +o.p+'/'+o.f+'/'+o.total;
					}
				},
				dbclick:function(data){
					editPoint(data);
				},
				menus:{
					'编辑':function(tr){
						var idx = $(tr).index();
						var data = tbl.data[idx];
						if(data == null){return;}
						
						editPoint(data);
					},
					'删除':function(tr){
						var idx = $(tr).index();
						var data = tbl.data[idx];
						if(data == null){return;}
						
						deletePoint([data]);
					},
					'重新统计':function(tr){
						
						var idx = $(tr).index();
						var data = tbl.data[idx];
						if(data == null){return;}
						
						fixData([data]);
					}
				}
			});
			
			var selectTree = new S.TreeSelect({
				el:'#projects_modules_select',
				ds:'${webcontext }/${pathvar.admin}/br/project/modules/list?projectId=${project.id}',
				render:function(node){
					return '<a class="icons books_stack"></a>'+node.name;
				},
				click:function(data){
					if(data ==null){
						$('#tp_moduleId').val('');
					}else{
						$('#tp_moduleId').val(data.id);
					}
					tbl.reload();
				}
			});
			
			$('#btn_testpoint_add').click(function(){
				
				var moduleId = $('#tp_moduleId').val();
				if(moduleId == ''){new S.Info({text:'请选择模块',type:'warn'}).show();return;}
				
				S.prompt('请输入','测试点名称',function(text){
					S.request({
						url:'${webcontext }/${pathvar.admin}/br/testing/tp/save',
						data:{name:text,groupId:'${tGroup.id}',moduleId:moduleId},
						success:function(){
							new S.Info({text:'操作成功',type:'success'}).show();
							tbl.reload();
						}
					});
				},'info');
			});
			
			function editPoint(data){
				S.prompt('修改名称','测试点名称',function(text){
					S.request({
						url:'${webcontext }/${pathvar.admin}/br/testing/tp/update',
						data:{id:data.id,name:text},
						success:function(){
							new S.Info({text:'操作成功',type:'success'}).show();
							tbl.reload();
						}
					});
				},'info',null,null,data.name);
			}
			
			$('#btn_testpoint_edit').click(function(){
				var items = tbl.getCheckedRow();
				if(items.length !=1){new S.Info({text:'请选择测试点',type:'warn'}).show();return;}
				editPoint(items[0]);
			});
			
			function fixData(items){
				var ids = [];
				S.each(items,function(i,item){
					ids.push(item.id);
				});
				S.request({
					url:'${webcontext }/${pathvar.admin}/br/testing/tp/fix',
					data:{ids:ids.join(',')},
					success:function(){
						new S.Info({text:'操作成功',type:'success'}).show();
						tbl.reload();
					}
				});
			}
			
			$('#btn_testpoint_fix').click(function(){
				var items = tbl.getCheckedRow();
				if(items.length ==0){new S.Info({text:'请选择测试点',type:'warn'}).show();return;}
				fixData(items);
			});
			
			function deletePoint(items){
				S.confirm('警告','确认要删除该测试点',function(){
					var ids = [];
					S.each(items,function(i,item){
						ids.push(item.id);
					});
					
					S.request({
						url:'${webcontext }/${pathvar.admin}/br/testing/tp/delete',
						data:{ids:ids.join(',')},
						success:function(){
							new S.Info({text:'操作成功',type:'success'}).show();
							tbl.reload();
							loadCases();
						}
					});
				},'danger');
			}
			
			$('#btn_testpoint_delete').click(function(){
				
				var items = tbl.getCheckedRow();
				if(items.length ==0){new S.Info({text:'请选择测试点',type:'warn'}).show();return;}
				
				deletePoint(items);
			});
			
			//test case
			$('#btn_testcase_add').click(function(){
				
				var items = tbl.getCheckedRow();
				if(items.length !=1){new S.Info({text:'请选择测试点',type:'warn'}).show();return;}
				
				var dlg = new S.Dialog({
					title:'增加测试用例',
					width:500,
					height:370,
					modal:true,
					url:'${webcontext }/${pathvar.admin}/br/testing/case/edit?testPointId='+items[0].id,
					buttons:{
						'保存':function(){
							if(!this.form.validate()){new S.Info({text:'表单填写不完整',type:'warn'}).show();return;}
							
							S.request({
								url:'${webcontext }/${pathvar.admin}/br/testing/case/save',
								data:this.form.param(),
								success:function(){
									new S.Info({text:'操作成功',type:'success'}).show();
									loadCases();
									dlg.remove();
								}
							});
						},
						'关闭':function(){
							this.remove();
						}
					}
				});
				dlg.show();
				
			});
			
			function editCase(id){
				var dlg = new S.Dialog({
					title:'编辑测试用例',
					width:500,
					height:370,
					modal:true,
					url:'${webcontext }/${pathvar.admin}/br/testing/case/edit?id='+id,
					buttons:{
						'保存':function(){
							if(!this.form.validate()){new S.Info({text:'表单填写不完整',type:'warn'}).show();return;}
							S.request({
								url:'${webcontext }/${pathvar.admin}/br/testing/case/update',
								data:this.form.param(),
								success:function(){
									new S.Info({text:'操作成功',type:'success'}).show();
									loadCases();
									dlg.remove();
								}
							});
						},
						'关闭':function(){
							this.remove();
						}
					}
				});
				dlg.show();
			}
			
			$('#btn_testcase_edit').click(function(){
				
				var ids = [];
				$('.testcases').find('.current').each(function(i,e){
					ids.push( $(this).attr('data'));
				});
				if(ids.length !=1){new S.Info({text:'请选择1个测试用例',type:'warn'}).show();return;}
				editCase(ids[0]);
			});
			
			
			function deleteCase(ids){
				S.confirm('警告','确认要删除选中的测试用例?',function(){
					S.request({
						url:'${webcontext }/${pathvar.admin}/br/testing/case/delete',
						data:{ids:ids.join(',')},
						success:function(){
							new S.Info({text:'操作成功',type:'success'}).show();
							loadCases();
						}
					});
				},'danger');
			}
			
			$('#btn_testcase_delete').click(function(){
				
				var ids = [];
				$('.testcases').find('.current').each(function(i,e){
					ids.push( $(this).attr('data'));
				});
				if(ids.length == 0){new S.Info({text:'未选中任何测试用例',type:'warn'}).show();return;}
				deleteCase(ids);
			});
			
			var timer = null;
			$('.testcases').delegate('li','click',function(){
				timer  && clearTimeout(timer);
				var $this = $(this);
				timer = setTimeout(function(){
					$this.toggleClass('current');
				}, 200);
			});
			
			$('.testcases').delegate('li','dblclick',function(){
				timer  && clearTimeout(timer);
				
				var id = $(this).attr('id');
				editCase(id);
			});
			
			
			new S.ContextMenu({
				el:'.testcases',
				delegate:'li',
				items:{
					'编辑':function(li){
						var id = $(li).attr('id');
						editCase(id);
					},
					'删除':function(li){
						var id = $(li).attr('id');
						deleteCase([id]);
					}
				}
			});
			
			var pageBar = new S.PageBar({
				max:0,
				current:0,
				size:20,
				el:'#casespb',
				slide:true,
				change:function(v){
					loadCases();
				}
			});
			
			
			var loading = new S.Loading('正在加载....','#casecontent');
			function loadCases(){
				var items = tbl.getCheckedRow();
				if(items.length !=1){new S.Info({text:'请选择测试点',type:'warn'}).show();return;}
				var pointId = items[0].id;
				loading.show();
				S.request({
					url:'${webcontext }/${pathvar.admin}/br/testing/case/list',
					data:S.fixConfig(pageBar.param(),{testPointId:pointId},S.formData('#casefrm')),
					success:function(json){
						if(!json){return;}
						if(json.vos){
							showCases(json.vos);
						}
						if(json.paging){
							pageBar.setPagingInfo(json.paging.pageNumber,json.paging.maxRowNumber,json.paging.pageSize);
						}
					},
					complete:function(){
						loading.hide.defer(loading,500);
					}
				});
			}
			
			var caseTemplate = new S.Template('<li data="@{id}">',
					'<div class="tcase @{status-x}">',
					'#@{id}　　@{name}',
					'<div class="ctrls">(Pass/Fail)<span class="switcher"><i class="handler @{result}"></i></span></div>',
				'</div>',
			'</li>');
			
			var renders = {
					'status-x':function(v,o){
						switch(o.result){
							case 1:return 'ok';
							case 2:return 'fail';
							default:return '';
						}
					},
					'result':function(v){
						switch(v){
							case 1:return 'yes';
							case 2:return 'no';
							default:return '';
						}
					},
					'name':function(n){
						return S.escapeHTML(n);
					}
			};
			
			function showCases(vos){
				var html = [];
				S.each(vos,function(i,item){
					html.push(caseTemplate.apply(item,renders));
				});
				$('.testcases').html(html.join(''));
			}
			
			$('.testcases').delegate('.switcher','click',function(e){
				var $this = $(this);
				var widthx = $this.width()/2;
				var id = $this.closest('li').attr('data');
				var p = e.offsetX<widthx;
				
				var url = '${webcontext }/${pathvar.admin}/br/testing/case/'+(p?'pass':'fail');
				
				S.request({
					url:url,
					data:{id:id},
					success:function(){
						if(p){
							$this.find('.handler').removeClass('yes').removeClass('no').addClass('yes');
							$this.closest('.tcase ').removeClass('ok').removeClass('fail').addClass('ok');
						}else{
							$this.find('.handler').removeClass('yes').removeClass('no').addClass('no');
							$this.closest('.tcase ').removeClass('ok').removeClass('fail').addClass('fail');
							
							S.confirm('确认','是否要将该用例报告为缺陷?',function(){
								S.request({
									url:'${webcontext }/${pathvar.admin}/br/testing/case/reportbug',
									data:{id:id},
									success:function(){
										new S.Info({text:'操作成功',type:'success'}).show();
									}
								});
								
							},'info');
							
						}
					}
				});
			});
			
			
			var hotKey = new S.HotKey('#quick_add_case');
			hotKey.registe('enter',function(){
				var items = tbl.getCheckedRow();
				if(items.length !=1){new S.Info({text:'请选择测试点',type:'warn'}).show();return;}
				
				var name = $('#quick_add_case').val();
				if(name == ''){return;}
				
				S.request({
					url:'${webcontext }/${pathvar.admin}/br/testing/case/save',
					data:{name:name,testPointId:items[0].id},
					success:function(){
						new S.Info({text:'操作成功',type:'success'}).show();
						$('#quick_add_case').val('').focus();
						loadCases();
					}
				});
			});
			
			$('#btn_testcase_template').click(function(){
				
				var rows = tbl.getCheckedRow();
				if(rows.length !=1){new S.Info({text:'请选择测试点',type:'warn'}).show();return;}
				
				var dlg = new S.Dialog({
					title:'常用用例',
					width:500,
					height:550,
					modal:true,
					url:'${webcontext }/${pathvar.admin}/br/testing/case/template',
					buttons:{
						'插入':function(){
							
							var items = caseTempalteTbl.getCheckedRow();
							if(items.length ==0){new S.Info({text:'请选择模板',type:'warn'}).show();return;}
							
							var ids = [];
							S.each(items,function(i,item){
								ids.push(item.id);
							});
							
							S.request({
								url:'${webcontext }/${pathvar.admin}/br/testing/case/template/tocase',
								data:{testPointId:rows[0].id,ids:ids.join(',')},
								success:function(){
									new S.Info({text:'操作成功',type:'success'}).show();
									loadCases();
								}
							});
						},
						'关闭':function(){
							this.remove();
						}
					}
				});
				dlg.show();
			});
			
			$('#btnquery').click(function(){
				loadCases();
			});
		});		
	</script>
</head>
<body>
<div class="filled-box">
		<div class="sidebar" style="width: 500px;">
			<div class="toolbar">
				<span class="btn" >测试点</span>
				<span class="btn" id="btn_testpoint_add"><i class="icons page_add"></i> 增加</span>
				<span class="btn" id="btn_testpoint_edit"><i class="icons page_edit"></i> 编辑</span>
				<span class="btn" id="btn_testpoint_fix"><i class="icons page_white_gear"></i> 重新统计</span>
				<span class="btn" id="btn_testpoint_delete"><i class="icons page_delete"></i> 删除</span>
			</div>
			<div class="content">
				<form name="frm001">
					<input type="hidden" name="groupId" value="${tGroup.id }">
					<input type="hidden" name="moduleId" id="tp_moduleId">
					<table width="100%">
						<tr>
							<td style="text-indent: 0;text-align: left;">项目：<input type="text" disabled="disabled" value="${project.name }"> 测试组：<input type="text" disabled="disabled" value="${tGroup.name }"></td>
						</tr>
						<tr>
							<td style="text-indent: 0;text-align: left;">模块：<input class="long" name="moduleId" type="text" id="projects_modules_select"></td>
						</tr>
					</table>
				</form>
				<table id="tbl_001" form="frm001" ds="${webcontext }/${pathvar.admin}/br/testing/tp/list" height="600">
					<tr>
						<td width="30" seq></td>
						<td width="50" checkall></td>
						<td>测试点</td>
						<td width="120" col="stat">PASS/FAIL/ALL</td>
					</tr>
					<tr>
						<td>@{seq}</td>
						<td><input type="checkbox" name="id" value="@{id}" /></td>
						<td>@{name}</td>
						<td>@{stat}</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="rightside" style="margin-left: 500px;">
			<div class="toolbar">
				<span class="btn" >测试用例</span>
				<span class="btn" id="btn_testcase_add"><i class="icons page_add"></i> 增加</span>
				<span class="btn" id="btn_testcase_edit"><i class="icons page_edit"></i> 编辑</span>
				<span class="btn" id="btn_testcase_delete"><i class="icons page_delete"></i> 删除</span>
				<span>快速增加：<input type="text" style="width: 200px;height: 20px;border: solid 1px  #ccc;vertical-align: middle;" id="quick_add_case" /></span>
				<span class="btn" title="用例模板" id="btn_testcase_template"><i class="icons categories"></i></span>
			</div>
			<div class="content" id="casecontent">
				<form id="casefrm">
					<table width="100%">
						<tr>
							<td>ID:<input type="text" name="id"> <span class="btn" id="btnquery"><i class="icons magnifier"></i></span></td>
						</tr>
					</table>
				</form>
				<ul class="testcases"></ul>
				<div id="casespb"></div>
			</div>
		</div>
	</div>
</body>
</html>